import { View, Image, Text } from "@tarojs/components"
import { useEffect, useRef, useState } from "react"
import { commentType } from "../type"
import avatarImg from '../../../assets/image/avatar.png'
import './index.less'

const comments: Array<commentType> = [
    {
        id: 'comment1',
        date: '2021-09-21 17:04',
        publisher: {
            id: 'xiaopangzi',
            avatar: avatarImg,
            name: '小胖子',
        },
        content: {
            id: 'content1',
            text: '姐姐好漂亮',
        },
        reply: [
            {
                id: 'replyId',
                rid: 'content1',
                text: '谢谢，比心心',
                userId: 'didi',
                userName: '铁粉'
            }
        ]
    }
]

function Commits() {
    const [input, setInput] = useState('')

    const ref = useRef()

    useEffect(() => {

    }, [ref])

    return <View ref={ref} className='comments'>
        <View>
            {
                comments.map(({ publisher, content, reply, date }, k) => {
                    return <View className='at-row comment' key={k}>
                        <View className='at-col at-col-2'>
                            <Image className='avatar' src={publisher.avatar} />
                        </View>
                        <View className='at-col at-col-10 publisher'>
                            <View className='name'>{publisher.name}</View>
                            <View className='content'>{content.text}</View>
                            {
                                reply.map((v, rk) => {
                                    return <View key={rk} className='reply'>
                                        <Text className='user-name'>{v.userName}</Text>:&nbsp;
                                        <Text className='text'>{v.text}</Text>
                                    </View>
                                })
                            }
                            <View className='at-row at-row__justify--end date'>
                                {date}
                            </View>
                        </View>
                    </View>
                })
            }
        </View>
    </View>
}

export default Commits